<template>
  <div class="content-container" style="margin: auto" v-show="show">
    <div class="auth-container">

      <div class="auth-qr-container" v-show="loginType">
        <p class="hint-title">
          快捷安全登录
        </p>
        <div class="hint-download">
          <span>使用</span>
          <a href="">支付宝APP</a>
          <span>点击「我的 - 扫一扫</span>
        </div>
        <div class="qr-container">
          <QrcodeVue :value="qrCodeText" :size="200" level="H"
          ></QrcodeVue>
        </div>

      </div>

      <div v-show="!loginType" class="auth-phone-container">
        <div class="auth-phone-title">
          手机验证码登录
        </div>
        <el-form :rules="rules" :model="form" ref="form">
          <div class="block-container phone-container focus">

            <el-form-item prop="phone">
              <div class="district-container input-bg">
                <span>+86</span>
                <img
                    src=""
                    class="icon-select" alt="">
              </div>
              <input type="tel" class="input-bg" style="width: 195px" placeholder="请输入手机号" v-model="form.phone"
                     maxlength="11">
            </el-form-item>

          </div>
          <el-form-item prop="code">
            <div class="block-container code-container ">
              <input type="text" v-model="form.code" class="input-bg" placeholder="请输入验证码" maxlength="6" minlength="6">
              <div class="countdown input-bg disable" @click="getSmsCode">获取验证码</div>
            </div>
          </el-form-item>

        </el-form>


        <div class="tips-container">
          <span class="tips-content">

          </span>
        </div>
        <div class="btn-login" @click="loginUser">
          登录
        </div>

      </div>

      <div class="login-type">
    <span class="linkblue">
      <span v-show="loginType" @click="loginType = !loginType">手机验证码登录</span>
      <span v-show="!loginType" @click="loginType = !loginType">快捷安全登录</span>
    </span>
      </div>
    </div>
  </div>

</template>

<script setup>
import QrcodeVue from "qrcode.vue";
import {ref, defineEmits} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from 'element-plus'
import {sendSmsCode, login} from "@/assets/api/userApi.js";
// 这个 就需要 vue 2 的写法
const emit = defineEmits(['loginSuccess'])
const qrCodeText = ref('1')
const loginType = ref(true)
const authData = ref({})
const route = useRoute()
const router = useRouter()
const form = ref({
  phone: '',
  code: ''
})
const timer = ref(null)
const show = ref(true)
const rules = {
  phone: [{required: true, message: '你输入的手机号格式错误', trigger: 'blur'}],
  code: [{required: true, message: '请输入6位验证码', trigger: 'blur'}, {min: 6, message: '必须输入6位验证码', max: 6}]
}

//获取验证码
const getSmsCode = () => {
  sendSmsCode(form.value).then(res => {
    if (res.code === 200) {
      ElMessage.success(res.message);
    } else {
      ElMessage.error(res.message);
    }
  })
}

// 获取二维码
const qr = () => {

  // getQrLogin().then(res => {
  //   if (res.data.code === 200) {
  //     qrCodeText.value = res.data.data.qrcodeImgUrl
  //     getQrStatus(res.data.data.qrcodeId)
  //   }
  // })

}

// 二维码状态
const getQrStatus = qrCodeId => {
  // timer.value = setInterval(() => {
  //   status({qrCodeId}).then(res => {
  //     if (res.data.code === 200) {
  //       store.commit('setUserInfo', res.data.data)
  //       localStorage.setItem('token', res.data.token)
  //       store.commit('setLoginDialog', false)
  //       store.commit('isLogin', true)
  //       clearInterval(timer.value)
  //       timer.value = null
  //     }
  //   })
  // }, 1500)
}

const loginUser = () => {
  login(form.value).then(res => {
    if (res.code === 200) {
      localStorage.setItem('userInfo',JSON.stringify(res.data))
      localStorage.setItem('isLogin',true)
      localStorage.setItem('token',res.tokenValue)
      router.push('/');
      emit('loginSuccess', false)
    } else {
      ElMessage.error(res.message)
    }
  })

}

</script>

<style scoped lang="scss">
$pink: rgb(254, 44, 85);
.auth-phone-container {
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px !important;
  margin-bottom: 24px;

  .auth-phone-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 100px;
    text-align: center;
    color: black;
  }

  .block-container {
    width: 272px;
    height: 40px;
    margin-top: 12px;
    display: flex;
    justify-content: center;

    input {
      height: 40px;
      text-rendering: auto;
      color: initial;
      letter-spacing: normal;
      word-spacing: normal;
      text-transform: none;
      text-indent: 0;
      text-shadow: none;
      display: inline-block;
      text-align: start;
      margin: 0;
      //font: 400 14px;
      border-width: 0;
      padding: 10px;
      background-color: rgba(46, 50, 56, .05);


    }

    :focus {
      outline: 0;
    }
  }

  .input-bg {
    background: rgba(46, 50, 56, .05);
    border-radius: 3px;
    height: 40px;
  }

  .phone-container {
    display: flex;
    align-items: center;

    .district-container {
      width: 70px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      // padding: 10px 8px 10px 10px;
      // box-sizing: content-box;
      margin-right: 4px;

      .icon-select {
        height: 16px;
        width: 16px;
        margin-left: 8px;
      }
    }

    #phone-num {
      flex: 1;
    }
  }

  .captcha-container {

    #captcha {
      width: 138px;
    }

    .captcha-image {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      cursor: pointer;

      .captcha {
        width: 100px;
      }
    }
  }

  .district-list {
    position: absolute;
    top: 76px;
    left: 80px;
    width: 200px;
    height: 188px;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);
    border-radius: 6px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 12px;
    z-index: 2;
    cursor: pointer;
    padding: 12px 0;

    .district-item {
      height: 25px;
      padding: 4px 0 4px 8px;
    }
  }

  .code-container {
    display: flex;
    align-items: center;
    justify-content: center;

    #code {
      height: 40px;
      flex: 1;
      min-width: 150px;
      border-radius: 3px 0 0 3px;
    }

    .countdown {
      padding: 10px;
      color: rgba(47, 48, 53, .7);
      text-align: right;
      cursor: pointer;
      border-radius: 0 3px 3px 0;
    }
  }

  .focus {
    border-bottom-color: #adb3fb;
  }

  .tips-container {
    width: 272px;
    height: auto;
    text-align: left;
    display: flex;
    color: #adb3fb;
    margin: 4px 0 0;
    align-items: center;
    justify-content: flex-start;

    .tips-icon {
      width: 20px;
      height: 20px;
    }

  }

  .btn-login {
    border-radius: 3px;
    background-color: #adb3fb;
    color: white;
    width: 255px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
      margin-right: 4px;
    }
  }

  .hint-privacy {
    display: flex;
    align-items: end;
    margin-top: 8px;
    width: 272px;

    .text-wrap {
      background: #252632;
      color: #fff;
    }

    .tip-content {
      background-color: #252632;
      padding: 8px 12px;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
    }

    .checkbox-wrap {
      height: 27px;
      display: flex;
      align-items: end;
      padding-bottom: 3px;
    }

    .content {
      line-height: 22px;
      color: rgba(47, 48, 53, .4);
      text-align: left;
      margin-left: 4px;

      a {
        text-decoration: none;
      }

      .privacy {
        color: black;
      }

      b {
        color: rgba(22, 24, 35, .75);
      }
    }
  }
}

.validate-wrap {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

#pc_lightshade {
  width: 300px;
  height: 300px;
}

#verify-bar-box > #verify-tools {
  height: 80px;
}


.page-container {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.content-container {
  position: relative;
  max-width: 800px;
  height: 414px;
  display: flex;
  justify-content: center;
  border: 1px solid rgba(22, 24, 35, .12);
  box-sizing: border-box;
  border-radius: 12px;
  background: radial-gradient(16.94% 22.31% at 92.06% 92.63%, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 100%),
  radial-gradient(63% 56.89% at 78.19% -21.62%, rgba(255, 255, 255, .8) 0%, rgba(247, 252, 252, .8) 34.14%, rgba(255, 255, 255, 0) 100%),
  radial-gradient(38.69% 102.05% at 36.88% 102.05%, #f6fdfa 0%, #fff 29.12%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(253, 219, 234, .2) 0%, rgba(190, 253, 254, .2) 100%);

  .auth-container {
    width: 400px;
    height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .login-type {
      flex: 1;
      cursor: pointer;
      position: relative;
      top: 40px;
    }
  }
}

.pink {
  color: #f6fdfa;
}

.linkblue {
  color: #04498d;
  font-size: 14px;
}

.scope-container {
  flex: 1;
  height: 358px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(#2f3035, .06);
  margin-top: 32px;
  padding-top: 32px;
  padding-left: 30px;
  padding-right: 50px;
  font-size: 14px;
  text-align: left;

  .scope-list-wrap {
    height: 100%;
    overflow: hidden;

    .client-scope {
      height: 100%;
      overflow-y: scroll;
      width: -webkit-calc(100% + 17px);
      width: -moz-calc(100% + 17px);
      width: calc(100% + 17px);
    }
  }

  .client-info {
    margin-bottom: 16px;

    .client-name {
      font-weight: 500;
      color: #2f3035;
    }

    span {
      color: rgba(47, 48, 53, .4);
    }

    &.hidden {
      display: none;
    }
  }

  .scope-item {
    width: calc(100% - 17px);
    display: flex;
    margin-bottom: 16px;
    color: #2f3035;

    .icon-scope {
      margin-right: 8px;
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      background-size: 100% auto;
    }

    &.hidden {
      display: none;
    }

    .icon-gray {
      background-image: url('');
      background-position: 0 -2px;
    }
  }
}

.tips-container {
  font-size: 100px;
  min-height: 20px;
  display: flex;
  color: #f6fdfa;
  margin: 14px 0 6px;
  align-items: center;
  justify-content: flex-start;

  .tips-icon {
    width: 20px;
    height: 20px;
  }
}


.auth-qr-container {
  width: 100%;
  // min-height: 280px;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 50px;

  .hint-title {
    font-size: 18px;
    text-align: center;
    color: #2f3035;
    font-weight: 500;
    line-height: 26px;
    margin: 0 0 8px;
  }

  .hint-download {
    font-size: 14px;
    text-align: center;
    color: rgba(47, 48, 53, .4);
    position: relative;
    line-height: 22px;

    a,
    a:visited,
    a:hover,
    a:active {
      color: $pink;
      text-decoration: none;
    }
  }

  .hint-version {
    font-weight: bold;
  }

  .qr-container {
    position: relative;
    width: 160px;
    height: 160px;
    background: #fff;
    border: 1px solid rgba(22, 24, 35, .12);
    box-sizing: border-box;
    border-radius: 8px;
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;

    .qr {
      width: 155px;
      height: 155px;
    }

    .qr-expired {
      cursor: pointer;
      position: absolute;
      width: 154px;
      height: 154px;
      background-color: #fff;
      opacity: .96;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      top: 2px;
      left: 2px;

      .qr-expired-img {
        width: 24px;
        height: 24px;
        margin-bottom: 16px;
      }
    }

    .hint-refresh {
      color: rgba(23, 26, 28, .65);
      font-size: 14px;
      line-height: 22px;
    }
  }

  .tips-container {
    width: 320px;
    min-height: 20px;
    display: flex;
    color: $pink;
    margin: 0 0 4px;
    align-items: center;
    justify-content: center;

    .tips-icon {
      width: 20px;
      height: 20px;
    }

  }
}


</style>
